<template>
  <div id="all">
    <div id="allItem">
      <div class="one" @click="addressManagement">
        <div v-if="jobs">
          <span>{{ jobs?.name }}</span>
          <span>{{ jobs?.mobile }}</span>
          <span> > </span>
        </div>
        <div v-if="jobs">{{ jobs?.district }}{{ jobs?.address }}</div>
        <div v-else>请选择地址</div>
      </div>

      <div class="three">
        <div>
          <img :src="curJob?.image" alt="" />
        </div>
        <div style="display: flex; flex-direction: column; justify-content: space-around">
          <div>
            <van-text-ellipsis :content="curJob?.title" rows="3" />
          </div>
          <span class="grayone">×1</span>
          <div>颜色：{{ curJob?.attribute }}</div>
          <div>{{ curJob?.integral }}积分</div>
        </div>
      </div>

      <div class="four">
        <div>
          <span>配送方式</span>
          <span>普通快递</span>
        </div>
        <div @click="couponCenter">
          <span>优惠券</span>
          <span>暂无可用优惠券</span>
        </div>
        <div>
          <span>买家留言</span>
          <span></span>
        </div>
        <input type="text" placeholder="请输入留言" />
        <div>
          <span></span>
          <span
            >商品总计: <span>{{ curJob?.integral }}积分</span></span
          >
        </div>
      </div>
    </div>
    <div class="six">
      <div>数量：<span>×1</span></div>
      <div>
        <div>
          总价: <span>{{ curJob?.integral }}积分</span>
        </div>
        <div>
          （余额： <span>{{ thisCount.cont }}</span
          >积分 ）
        </div>
      </div>
      <div @click="giftOrders()">支付</div>
    </div>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js'  // 导入名为useIntegrallist的函数，从'@/stores/integralList.js'文件中
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入名为storeToRefs的函数，从'pinia'库中
import { showDialog, showToast } from 'vant'  // 导入名为showDialog和showToast的函数，从'vant'库中
import { useRouter, useRoute } from 'vue-router'  // 导入名为useRouter和useRoute的函数，从'vue-router'库中
import { integralPayment, addressIndex } from '../api'  // 导入名为integralPayment和addressIndex的函数，从'../api'文件中

const integrallist = useIntegrallist()  // 调用useIntegrallist函数，将返回值赋给integrallist变量
const { jobs, curJob } = storeToRefs(integrallist)  // 使用storeToRefs函数处理integrallist，并将结果解构赋值给jobs和curJob变量
const userInfoStore = useUserInfoStore()  // 调用useUserInfoStore函数，将返回值赋给userInfoStore变量
const route = useRoute()  // 调用useRoute函数，将返回值赋给route变量
const orderId = route.query.orderId  // 从route对象的query属性中获取orderId的值，并赋给orderId变量
const { curStudent, thisCount } = storeToRefs(userInfoStore)  // 使用storeToRefs函数处理userInfoStore，并将结果解构赋值给curStudent和thisCount变量
const router = useRouter()

// 调用addressIndex函数，传入参数并处理返回结果
addressIndex({ user_id: curStudent?.value?.id }).then((res) => {
  jobs.value = res.find((item) => item.status == 1)  // 将res中status等于1的项赋给jobs.value
})


// 优惠券挑转，点击后跳转到'/CouponCenter'页面
function couponCenter() {
  router.push('/CouponCenter')
}

// 支付成功跳转，点击后进行支付操作，如果支付成功则跳转到'/IntegralOrder'页面
function giftOrders() {
  if (curStudent.value.integral <= curJob.value.integral) {
    showDialog({
      title: '积分余额不足',
      message: '请坚持每日打卡，领取积分',
      theme: 'round-button',
      confirmButtonColor: `#ffc456`,
      cancelButtonColor: `#dee1e6`,
      showCancelButton: true,
      confirmButtonText: `去打卡`
    }).then(() => {
      router.replace('/clock')
    })
    return
  } else {
    integralPayment({  // 调用integralPayment函数，传入参数进行支付操作
      id: orderId,
      points_id: curJob.value.id,
      points: curJob.value.integral, 
      status: 1
    }).then(() => {
      showToast({
        message: '支付成功',
        icon: 'https://pic.ntimg.cn/file/20170307/23639287_095616713000_2.jpg'
      })  // 显示一个弹框提示支付成功
      userInfoStore.getUserInfo()  // 调用getUserInfo方法更新用户信息
      setTimeout(() => {
        router.push('/IntegralOrder')  // 延迟2秒后跳转到'/IntegralOrder'页面
      }, 2000)
    })
  }
}

// 点击地址跳转，点击后跳转到'/AddressManagement'页面
function addressManagement() {
  router.push('/AddressManagement')
}

</script>

<style lang="less" scoped>
@var1: #f5f6f8;
@var2: #999999;
@var3: #fe6870;
@var4: #4ec183;
@var5: #969292;
@var6: #ffc456;
@var7: #9a9a9a;
@var8: #4b4747;
@var9: #717171;
@var10: #ffffff;
@var11: #fb4e4e;

#all {
  background-color: @var1;
  height: 95vh;
}
#allItem {
  width: 94%;
  margin-left: 3%;
  padding-top: 2vh;
}
.one {
  background-color: white;
  border-radius: 10px;
  padding: 1vh 2vw;
  > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1vh;
    > span:last-child {
      width: 50%;
      display: flex;
      justify-content: end;
      color: @var2;
    }
  }
  > div:last-child {
    font-size: 14px;
  }
}
.two,
.three,
.four {
  background-color: white;
  border-radius: 10px;
  padding: 1vh 2vw;
  margin-top: 2vh;
}
.two > div:first-child {
  font-weight: 600;
  margin-bottom: 2vh;
}
#twoItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2vh;
  > div:first-child > div:first-child {
    font-size: 15px;
    margin-bottom: vh;
  }
  span {
    background-color: @var4;
    margin-left: 4vw;
    color: white;
    padding: 1% 1.5vw;
    border-radius: 10px;
    font-size: 11px;
  }
  > div:first-child > div:last-child {
    color: @var5;
    font-size: 13px;
  }
  ~ div {
    border: 1px solid @var6;
    padding: 0.5vh 0;
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
    color: @var6;
    margin: 1vh 0;
  }
}
#cuo {
  background-color: @var3;
  width: 18px;
  height: 18px;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.three img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 1vh 2vw;
}
.three > div:last-child {
  margin: 1vh 1vw;
  > div:first-child {
    font-size: 14px;
    font-weight: 600;
  }
  > div:nth-child(2),
  > div:nth-child(3) {
    font-size: 12px;
    margin-top: 0.7vh;
    color: @var7;
    font-weight: 600;
  }
  > div:last-child {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0.7vh;
  }
}
.three {
  display: flex;
}
.four > div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 1.7vh 0;
  > span:first-child {
    font-weight: 600;
    color: @var8;
  }
  > span:last-child {
    color: @var9;
    > span {
      color: black;
      font-weight: 600;
      font-size: 16px;
    }
  }
  &:first-child > span:last-child {
    font-weight: 550;
  }
}
input::-webkit-input-placeholder {
  color: #dbdadaea;
  font-size: 14px;
  font-weight: 600;
}
input {
  padding: 1vh 0;
  border: none;
  border-bottom: 2px solid #eeeeee;
  width: 100%;
  font-size: 1em;
  font-style: italic;
  font-family: 'KAITI';
}
input[type='text']:focus {
  outline: none;
}
.six {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  padding: 1vh 0;
  width: 100vw;
  position: fixed;
  bottom: 3%;
  > div:last-child {
    background-color: @var6;
    width: 30vw;
    margin-right: 3vw;
    text-align: center;
    color: white;
    padding: 1vh 0;
    font-weight: 600;
    border-radius: 30px;
  }
  > div:first-child {
    font-size: 16px;
    background-color: @var10;
    width: 25vw;
    padding: 1.5vh 0;
    text-align: center;
    > span:last-child {
      color: @var11;
      font-size: 19px;
      font-weight: 600;
    }
  }
}
.six > div:nth-child(2) {
  width: 40vw;
}
.six > div:nth-child(2) > div:first-child {
  color: black;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
  background-color: white;
}
.six > div:nth-child(2) > div:first-child span {
  color: red;
}
.six > div:nth-child(2) > div:last-child {
  color: #8d8a8a;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  background-color: white;
}
.grayone {
  color: #6e6969;
  margin-left: 10vw;
}
</style>
